<template>
  <main-box>
    <PlusSearch
      v-model="queryform"
      :columns="formConfig"
      :show-number="2"
      label-width="80"
      label-position="right"
      class="mb-xs"
      @search="initData()"
      @reset="initData()"
    >
      <template #plus-field-warehouseId>
        <chooseWarehouse v-model="queryform.warehouseId" />
      </template>
    </PlusSearch>

    <div class="mb-2">
      <btnExport
        :exportApi="exportApi"
        :queryform="queryform"
        download-name="人员借还统计"
      />
    </div>

    <PureTable
      ref="tableRef"
      border
      adaptive
      :loading="loading"
      :data="tableData"
      :columns="columns"
      :pagination="pagination"
      @page-size-change="initData()"
      @page-current-change="initData(false)"
    />
  </main-box>
</template>

<script setup lang="tsx">
import { ref } from "vue";
import { useTableConfig } from "@/utils/tableConfig";
import { type PlusColumn, PlusSearch } from "plus-pro-components";
import btnExport from "@/components/btnExport/index.vue";

import { listApi, exportApi } from "@/api/statistics/staff";
import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
import { useRouter } from "vue-router";
import chooseWarehouse from "@/components/choose-warehouse/index.vue";

/* 查询表单 */
const formConfig: PlusColumn[] = [
  {
    label: "查询",
    prop: "searchValue",
    fieldProps: {
      placeholder: "账号/用户/角色"
    }
  },
  {
    label: "工具室",
    prop: "warehouseId"
  }
];
const warehouseId = (window as any).datasource;
const queryform = ref({
  searchValue: "",
  warehouseId: warehouseId > 0 ? warehouseId : ""
});

/* 表格数据 */
const { pagination } = useTableConfig();
const tableData = ref([]);
const loading = ref(false);
const columns = [
  { label: "账号", prop: "userName" },
  { label: "用户名", prop: "nickName" },
  { label: "角色", prop: "roleName" },
  { label: "组织", prop: "ancestorsName" },
  {
    label: "账号状态",
    prop: "accountStatus",
    cellRenderer: ({ row }) => {
      // 帐号状态（0正常 1冻结 2注销）
      let col = "success";
      let text = "正常";

      if (row.accountStatus == 1) {
        col = "warning";
        text = "冻结";
      } else if (row.accountStatus == 2) {
        col = "danger";
        text = "注销";
      }
      return <el-tag type={col}>{text}</el-tag>;
    }
  },
  { label: "工具室", prop: "warehouseName" },
  { label: "累计借出", prop: "totalLendCount", sortable: true },
  { label: "累计归还", prop: "totalReturnCount", sortable: true },
  { label: "累计时长(小时)", prop: "totalUseHours", sortable: true },
  {
    label: "操作",
    prop: "action",
    cellRenderer: ({ row }) => (
      <el-link underline={false} type="primary" onClick={() => goDetail(row)}>
        查看
      </el-link>
    )
  }
];

const initData = async (needInit = true) => {
  loading.value = true;
  if (needInit) {
    pagination.currentPage = 1;
  }
  await listApi({
    pageNum: pagination.currentPage,
    pageSize: pagination.pageSize,
    ...queryform.value
  }).then(res => {
    tableData.value = res.rows;
    pagination.total = Number(res.total);
  });
  loading.value = false;
};

initData();

/* 操作 */
const router = useRouter();
const goDetail = row => {
  const query = {
    query: { userId: String(row.userId) },
    path: "/statistics/staff/detail",
    name: "StatisticsStaffDetail"
  };
  useMultiTagsStoreHook().handleTags("push", {
    ...query,
    meta: {
      title: "人员工具记录",
      dynamicLevel: 1
    }
  });
  router.push(query);
};
</script>
